<template>
	<view class="page-index">
		<!-- <div style="position:absolute;bottom:0px;font-size:20px;font-weight:bold;">返回</div> -->
		<view class="bar-area">
			<view
				class="fc-white fs30"
				@click="loginOut"
				:style="showQuitBtn ? '' : 'visibility: hidden;'"
				>退出</view
			>
			<view class="flex-row" @click="areaChange">
				<view class="fc-white fs35">输血</view>
			</view>
			<view class="fc-white fs30">{{ loginUser && loginUser.YHXM }}</view>
		</view>
		<!-- <web-view src="http://www.baidu.com" frameborder="0" style="width: 100%; height: calc(100% - 230rpx);position:absolute;top:100rpx;"></web-view> -->
		<!-- -->
		<view class="patient-info" v-if="step != 0">
			<view class="item-title">
				<view class="item-brch">{{ nowPatient.brch }}</view>
				<view class="item-info">
					<view class="item-line"></view>
					<view class="item-body">
						<view class="item-body-top">
							<view class="fs30 fb">{{ nowPatient.brxm }}</view>
							<u--image
								class="ml10"
								width="20"
								height="20"
								:src="
									nowPatient.brxbDm == 1
										? '/static/man.svg'
										: '/static/female.svg'
								"
							></u--image>
							<view class="fs30 fc-sub ml10">{{
								nowPatient.brnl
							}}</view>
							<view class="fs30 fc-sub ml10">{{
								nowPatient.mzhm
							}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="patientInfo-zd"> 诊断：{{ nowPatient.brzs }} </view>
		</view>
		<view class="scan-tips-warning " v-if="step == 0"> 请扫描病人腕带进行确认 </view>
		<view class="scan-tips-warning " v-if="step == 1"> 请再次扫描腕带确认或扫描血袋码执行 </view>
		<!-- <view class="scan-tips-primary" v-if="step == 1"> 已确认腕带信息 </view> -->
		<view class="scan-tips-warning " v-if="step == 2"> 请再确认患者腕带信息 </view>

		<!-- <view
			style="display: flex; position: absolute; top: 0rpx; left: 100rpx"
		>
			<view>
				<view @click="scanTest(testBrid, 1)">腕带扫描测试</view>
				<view @click="scanTest(testId, 2)"
					>血袋扫描测试</view
				>
			</view>
			<view>
				<input
					type="text"
					v-model="testBrid"
					placeholder="请输入病人id"
				/>
				<input
					type="text"
					v-model="testId"
					placeholder="请输入医嘱计划号"
				/>
			</view>
			<view>
				<view @click="openVitalSign">打开生命体征</view>
			</view>
		</view> -->

		<!-- -->
		<view class="main-context" v-if='step != 0'>
			<scroll-view
				class="scroll-view"
				scroll-y="auto"
				:refresher-enabled="false"
				@refresherrefresh="onPullRefresh"
				@scrolltolower="onReachBottomDistance"
				:refresher-triggered="isRefresherTriggered"
			>
				<view>
					<view v-for="(item,index) in listData" :key="index">
						<view class="item-area" @click="handleClickBloodBag(item)">
							<view class="blood-bag-title">
								<view class="blood-bag-title-text">血袋号：{{item.barCode}}</view>
								<!-- <view class="blood-bag-title-losedate">
									失效日期：暂无
								</view> -->
							</view>
							<view class="blood-bag-content">
								<view class="blood-bag-content-main">
									<view class="blood-bag-content-main-text">
										{{item.bloodName}}
									</view>
									<view class="blood-bag-content-main-amount">
										{{item.volume}}ml
									</view>
								</view>
								<view class="item-check-status">
									<view class="item-check-yes">
										<view class="item-check-status-text">{{getBloodBagStatus(item.xdzt)}}</view>
									</view>
								</view>
							</view>
							<view class="blood-bag-exper">
								<view class="blood-bag-exper-text">
									交叉配血实验：{{item.matchingResult}}
								</view>
								<!-- 暂停标志 -->
								<view class="blood-bag-exper-suspend" v-if="item.suspendMark == 1">
									暂停
								</view>
							</view>
						</view>
						<BloodBagDetail v-if="item.openDetail" :detail="item"></BloodBagDetail>
					</view>
                    
					<u-empty
						:show="!(listData && listData.length > 0)"
						marginTop="300"
					></u-empty>
				</view>
			</scroll-view>
		</view>

		<!-- 测量生民体征 -->
		<VitalSignForm ref="transfusionVitalSignForm" 
		:bloodBag="nowEditBloodBag" 
		:patientInfo="nowPatient"
		@close="vitalSignClose"></VitalSignForm>

		<u-modal :show="continueVisible" 
            showCancelButton 
            title="提醒" 
            @confirm="handleConfirmContinue" 
            @cancel="handleCancelContinue">
            <view class="slot-content">
				<div class="confirm-content">
                    <div class="confirm-content-icon">
                        <u--image width="16" height="16"
                            src="/static/warning.svg"></u--image>
                    </div>
                    <div class="confirm-content-text">暂停状态，是否继续？</div>
                </div>
			</view>
        </u-modal>
	</view>
</template>

<script>
import { mapState } from "vuex"
import { logout } from "@/api/utils.js"
import {
	getDateTimeString,
	getAdviceType,
	getPlanStatus,
	getBloodBagStatus,
	showToast,
} from "@/static/js/common.js"

// 血袋详情
import BloodBagDetail from './bloodBagDetail'
// 测量生命体征
import VitalSignForm from './vitalSignForm'


export default {
	components: {},
	props: {
		showQuitBtn: {
			type: Boolean,
			default: function () {
				return true
			},
		},
	},
	components: {
		BloodBagDetail,//血袋详情
		VitalSignForm,//测量生命体征
	},
	data() {
		return {
			continueVisible:false,//是否继续 确认框
			isContinue:false,//是否是继续
			step: 0, // 0:初始化空白状态  1:已扫描腕带  2:已扫描输液贴

			isRefresherTriggered: false,

			tabList: [
				{
					name: "药品",
				},
				// {
				// 	name: '处置'
				// },
				// {
				// 	name: '检查',
				// }
			],
			currentTab: 0,

			originListData: [], //医嘱接口返回的原始数据
			listData: [], // 医嘱计划处理后的数据
			nowPatient: {
				brch: "Q123", //
				brxm: "张三丰", //
				brxbDm: "1", //
				brnl: "12岁", //
				mzhm: "BLH1231233", //
				brzs: "身体不适", //
			}, // 当前病人
			nowIdVismed: "", //当前患者的就诊流程号
			nowIdMedord: "", //当前扫描出来的组号
			nowIdMedordipex: "", //当前扫描出来的医嘱计划号

			nowPlanList: [], //当前执行的计划列表

			nowEditBloodBag:null,//当前巡视的血袋

			allowJump:false,//是否允许跳流程执行

			testBrid: "", //
			testId: "", //

		}
	},
	watch: {},
	computed: {
		...mapState(["loginUser", "area"]),
		actions() {
			if (this.area && this.area.length > 0) {
				let list = this.area.map((item) => {
					return {
						name: item.ksmc,
						code: item.ksdm,
					}
				})
				return list
			} else {
				return []
			}
		},
	},
	beforeDestroy() {
		uni.$off("scanCodeEmit") //取消监听
	},
	mounted() {
		// 接收原生扫描传值
		uni.$on("scanCodeEmit", async (res) => {
			console.log("执行扫描内容：", res)
			// uni.$emit("scanCodeEmit", res)
			if(res.length > 20){// 内容长度大于20 是腕带
				let patientRes = await this.getPatientByBrid(res)
				if (patientRes.res.Data.length == 0) {
					showToast(-1,'没有找到病人信息')
					return
				}
				this.nowPatient = patientRes.res.Data[0] //获取病人信息
				await this.getBloodBagList(this.nowPatient.hisJzxh) //获取血袋列表
				this.step = 1 //已扫描腕带
			}else{//是血袋
				if (this.step != 1) {
					// 没有扫描腕带
					showToast(-1, '请先扫描患者腕带')
					return
				}
				let bloodBagBarCode = res;
				if(this.listData.find(el=>el.barCode == bloodBagBarCode) !=null){//患者血袋中存在扫描血袋号
					this.nowEditBloodBag = this.listData.find(el=>el.barCode == bloodBagBarCode);
					if(Number(this.nowEditBloodBag.xdzt) < 2){
						if(this.allowJump){
							this.openVitalSign(this.nowEditBloodBag)
							this.step = 2 //已扫描血袋
						}else{
							showToast(-1,'请先取血');
							return;
						}
					}else if(Number(this.nowEditBloodBag.xdzt) > 6){
						showToast(-1,'血袋已上交');
						return;
					}else{
						this.openVitalSign(this.nowEditBloodBag)
						this.step = 2 //已扫描血袋
					}
				}else{
					showToast(-1,`血袋不属于病人【${this.nowPatient.brxm}】`)
					return;
				}
			}
		})

		console.log("当前登陆人信息：", this.loginUser)
	},
	methods: {
		/**
		 * 扫描测试
		 * type 1 腕带  2 血袋 
		 */
		async scanTest(res, type) {
			if (type == 1) {
				let patientRes = await this.getPatientByBrid(res)
				if (patientRes.res.Data.length == 0) {
					showToast(-1,'没有找到病人信息')
					return
				}
				this.nowPatient = patientRes.res.Data[0] //获取病人信息
				await this.getBloodBagList(this.nowPatient.hisJzxh) //获取血袋列表
				this.step = 1 //已扫描腕带
			} else if (type == 2) {
				if (this.step != 1) {
					// 没有扫描腕带
					showToast(-1, '请先扫描患者腕带')
					return
				}
				let bloodBagBarCode = res;
				if(this.listData.find(el=>el.barCode == bloodBagBarCode) !=null){//患者血袋中存在扫描血袋号
					this.nowEditBloodBag = this.listData.find(el=>el.barCode == bloodBagBarCode);
					if(Number(this.nowEditBloodBag.xdzt) < 2){
						if(this.allowJump){
							this.openVitalSign(this.nowEditBloodBag)
							this.step = 2 //已扫描血袋
						}else{
							showToast(-1,'请先取血');
							return;
						}
					}else if(Number(this.nowEditBloodBag.xdzt) > 6){
						showToast(-1,'血袋已上交');
						return;
					}else{
						this.openVitalSign(this.nowEditBloodBag)
						this.step = 2 //已扫描血袋
					}
				}else{
					showToast(-1,`血袋不属于病人【${this.nowPatient.brxm}】`)
					return;
				}
			}
		},

		//血袋继续
		handleConfirmContinue(){
			this.isContinue = true;
			this.$refs.transfusionVitalSignForm.show(this.nowEditBloodBag,this.isContinue);
			this.continueVisible = false;
		},
		//血袋继续 取消
		handleCancelContinue(){
			this.continueVisible = false;
			this.isContinue = false;
		},

		/**
		 * 打开 生命体征输入 弹窗
		 */
		openVitalSign(bloodBag){
			if(bloodBag.suspendMark == '1'){//血袋是暂停状态
				this.continueVisible = true;//打开确认继续弹窗
			}else{
				this.isContinue = false;
				this.$refs.transfusionVitalSignForm.show(bloodBag,this.isContinue);
			}
		},

		//生命体征弹窗关闭回调
		vitalSignClose(){
			this.getBloodBagList(this.nowPatient.hisJzxh);//刷新血袋列表
		},

		//扫描腕带获取血袋
		async getBloodBagList(visitId){
			let params = {
				// barCode: "string",//血袋码
				visitId: visitId,//病人就诊id
			}
			let result = await this.$commonAjax("/auth/mobile/advice/BloodTranSfusion/ScanWristStrap", params)
			if (result.res.ReType == 0) {
				console.log('血袋列表：',result.res);
				result.res.Data.forEach(el=>{
					el['openDetail'] = false;
				})
				this.listData = result.res.Data;
			} else {
				showToast(-1,'获取血袋列表失败')
				return
			}
		},

		//点击血袋
		handleClickBloodBag(item){
			this.openBloodBagDetail(item);
		},
		//打开血袋详情
		openBloodBagDetail(item){
			if(item.openDetail){
				this.$set(item,'openDetail',false);
			}else{
				this.$set(item,'openDetail',true);
			}
		},

		/**
		 * 根据病人id 获取病人详情
		 * brid 病人id
		 */
		getPatientByBrid(brid) {
			let params = {
				orgId: this.loginUser?.JGID, //长机构id
				jzlx: null, // 就诊类型 1 抢救 2 留观 3诊室 不传就是全部
				lspb: 0, //离室判别
				yhdm: this.loginUser?.YHDM, // 当前登录用户的员工代码
				type: 1, //：病人列表   2：我的关注
				// hisJzxh: idVismed,
				// idMedord:idMedord,// 医嘱组号
				brid: brid, //病人id
			}
			return this.$commonAjax(
				"auth/mobile/patient/get/getPatientList",
				params
			)
		},

		//获取血袋状态
		getBloodBagStatus(status){
			return getBloodBagStatus(status);
		},

		/**
		 * 扫描执行医嘱
		 * planList 医嘱计划组
		 */
		async handleScanExecute(planList) {
			if (planList.length == 0) {
				showToast(-1,'请先确认医嘱计划')
				return
			}
			console.log("医嘱计划原始数据：", this.originListData)
			console.log("核对数据入参：", planList)
			let list = []
			let date = new Date()
			planList.forEach((el) => {
				list.push({
					// desClinicnoex: "string",
					dtClinicex: getDateTimeString(date), //执行时间
					// dtConfirmex: getDateTimeString(date),//确认执行时间
					idClinicexper: this.loginUser.YHID, //临床执行人
					nameClinicexper: this.loginUser.YHXM, //执行人姓名
					// idConfirmexper: "string",//临床确认执行人
					idDepClinicex: this.loginUser.KSID, //执行人部门id
					idEmpSign: this.doubleCheckForm.userId, //双签人用户id
					idMedord: el.idMedord,
					idMedordipex: el.idMedordipex,
					// note: null,//备注
					// sdClinicexpertpCd: "string",//临床执行人类型编码
					sdClinicextpCd: 2, //执行方式编码 1 PC 2 PDA 3 LIS 4 PACS
					// sdClinicnoexCd: "string",//不执行原因编码
					idOrg: this.loginUser.JGID, //当前登陆人科室部门id
				})
			})
			let params = {
				fgExecute: "1",
				idVismed: this.nowPatient.hisJzxh,
				executeOpPlanCOList: list,
				idClinicexper: this.loginUser.YHID, //临床执行人
				idOrg: this.loginUser.JGID, //当前登陆人科室部门id
				nameClinicexper: this.loginUser.YHXM, //执行人姓名
			}
			return this.$commonAjax(
				"auth/mobile/advice/executeAdvice/scanEcisAdviceExecute",
				params
			).then((res) => {
				showToast(res.res.ReType, res.res.Msg) //消息提示
				if (res.res.ReType == 0) {
					// if(this.listData.find(el=>el.idMedordipex == this.nowIdMedordipex) != null){
					// 	this.listData.find(el=>el.idMedordipex == this.nowIdMedordipex).adviceStatus = '已执行';
					// }
					this.executeFilter = 3 //筛选已执行的数据
					setTimeout(() => {
						this.getPlanListByIdVismed(this.nowPatient.hisJzxh, 1)
					}, 1000)

					this.step = 2
					this.nowPlanList = []
				}
			})
		},
		
		/**
		 * 处理医嘱计划数据
		 */
		handlePlanList(listData) {
			console.log("处理前的医嘱计划列表：", listData)
			let planList = []
			listData.forEach((el) => {
				let obj = {
					idMedordipex: el.idMedordipex,
					adviceStatus: getPlanStatus(
						el.hihisAdvicePlanBeanList[0].adviceStatus
					), //状态
					planTime: el.hihisAdvicePlanBeanList[0].dtMedordsrvex, //计划时间
					usage: el.hihisAdvicePlanBeanList[0].yytjmc, //用法
					adviceType: getAdviceType(
						el.hihisAdvicePlanBeanList[0].sdSrvtpCd
					),
					drugList: el.hihisAdvicePlanBeanList, //药品医嘱列表
				}
				planList.push(obj)
			})
			console.log("处理后的医嘱计划列表：", planList)
			return planList
		},
		
		loginOut() {
			logout()
		},
		onPullRefresh() {
			if (this.isRefresherTriggered) {
				return
			}
			this.isRefresherTriggered = true
			this.getPlanListByIdVismed(this.nowPatient.hisJzxh, 1)
		},
		onReachBottomDistance() {
			console.log(1111)
		},
	},
}
</script>

<style lang="scss">
.main-context {
	position: relative;
	height: calc(100% - 340rpx);
}
.scan-tips-warning {
	text-align: center;
	background-color: #faefe4;
	font-size: 30rpx;
	color: #ff9a27;
	padding: 10rpx 0rpx;
}
.scan-tips-primary {
	text-align: center;
	background-color: #4089fe1f;
	font-size: 30rpx;
	color: #4088fe;
	padding: 10rpx 0rpx;
}
.bar-area {
	height: 100rpx;
	background-color: $bs-color-primary;
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: 30rpx;
	justify-content: space-between;
	padding: 0 30rpx;
}
.scroll-view {
	width: 100%;
	height: calc(100% - 20rpx);
	background-color: #f3f5f7;
	padding-bottom: 20rpx;
}
.patient-info {
	padding: 20rpx;
	position: relative;
	background-color: #ffffff;

	.filter-button {
		font-size: 28rpx;
		color: #4088fe;
		background-color: #ebf3fe;
		border: 2rpx solid #4088fe;
		border-radius: 6rpx;
		width: 100rpx;
		text-align: center;
		padding: 10rpx 10rpx;
		position: absolute;
		right: 20rpx;
		top: 14rpx;
		z-index: 100;
	}
}
.item-area {
	position: relative;
	margin: 20rpx 20rpx 0 20rpx;
	background-color: #ffff;
	border-radius: 10rpx;
	padding: 10rpx;
	.blood-bag-title {
		background-image: url("~@/static/danger_strip.svg");
		background-repeat: no-repeat;
		background-size: 140%;
		padding: 6rpx 10rpx;
		display: flex;
	}
	.blood-bag-title-text {
		color: #ffffff;
	}
	.blood-bag-title-losedate {
		font-size:22rpx;
		color: #909399;
		margin-left: auto;
	}
	.blood-bag-content {
        padding: 10rpx;
        display: flex;
        font-size: 26rpx;
        align-items: center;
	}
	.blood-bag-content-main {
        display: flex;
        align-items: center;
        .blood-bag-content-main-text{

        }
        .blood-bag-content-main-amount{
            margin-left: 20rpx;
        }
	}
	.blood-bag-exper{
		color: #909399;
		font-size: 24rpx;
		margin: 0rpx 10rpx;
		line-height: 40rpx;
		display: flex;
		.blood-bag-exper-text{
			
		}
		.blood-bag-exper-suspend {
			margin-left: auto;
			color: orange;
			font-weight: bold;
		}
	}

}
.item-title {
	padding: 6rpx 10rpx 12rpx 10rpx;
	display: flex;
}
.item-line {
	width: 1rpx;
	background-color: #d6d7d9;
	height: 46rpx;
	width: 2rpx;
}

.item-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 20rpx;
}
.item-body-top {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 10rpx;
}
.item-check-status {
	font-size: 27rpx;
	margin-left: auto;
	display: flex;
	align-items: center;
	color: #ffffff;
	.item-check-no {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8rpx 15rpx;
		border-radius: 8rpx;
		background-image: url("~@/static/warning_rect.svg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
	.item-check-yes {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8rpx 15rpx;
		border-radius: 8rpx;
		background-image: url("~@/static/success_rect.svg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
	.item-check-status-text {
		// position: relative;
		// bottom: 4rpx;
		// right: 4rpx;
	}
}

.item-brch {
	width: 98rpx;
	font-size: 30rpx;
	color: #e06263;
	font-weight: bold;
}
.item-info {
	display: flex;
}

.item-content {
	font-size: 28rpx;
	display: flex;
	position: relative;
	.item-content-icon {
		font-size: 25rpx;
		padding: 4rpx 8rpx;
		border-radius: 8rpx;
		background-color: #fff5ea;
		color: #ff9a27;
		// width: 28rpx;
		height: 37rpx;
		margin-right: 10rpx;
	}
	.item-usage {
		background-color: #f0f3f6;
		border-radius: 8rpx;
		padding: 4rpx 16rpx;
		height: 35rpx;
		font-size: 25rpx;
		position: absolute;
		bottom: 15rpx;
		right: 10rpx;
	}
	.item-check-yes {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8rpx 15rpx;
		border-radius: 8rpx;
		background-color: #26bf4017;
		margin-bottom: 10rpx;
		margin-left: auto;
	}
}
.check-datetime {
	font-size: 25rpx;
	color: #909399;
	padding: 0rpx 12rpx 8rpx 12rpx;
}
.item-bottom {
	display: flex;
	align-items: center;
	.plan-datetime {
		font-size: 25rpx;
		color: #909399;
		padding: 0rpx 12rpx 8rpx 12rpx;
	}
}

.patientInfo-zd {
	width: calc(100% - 100rpx);
	font-size: 25rpx;
	color: #909399;
	padding: 0rpx 12rpx 8rpx 12rpx;
	position: relative;
	left: 116rpx;
}
.blood-bag-check {
	height: 500rpx;
	position: relative;
	padding: 20rpx;
	.blood-bag-check-title {
		font-size: 34rpx;
		text-align: center;
		margin-bottom: 30rpx;
	}
	.blood-bag-check-main {
		font-size: 34rpx;
		.blood-bag-check-checked {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}
		.blood-bag-check-checking {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 200rpx;
			.blood-bag-check-checking-main {
				display: flex;
				align-items: center;
			}
		}
	}
	.submit-button {
		display: flex;
		position: absolute;
		bottom: 20rpx;
		width: 100%;
		button {
			color: #262626;
			background-color: #ffffff;
			margin: 5rpx;
		}
		.primary-button {
			color: #ffffff;
			background-color: #4088fe;
		}
	}
}
.blood-bag-tag {
	font-size: 26rpx;
	color: #999999;
	background-color: #f0f3f6;
	border-radius: 8rpx;
	margin: 5rpx 10rpx 5rpx 0rpx;
	padding: 6rpx;
}
.confirm {
	display: flex;
	position: absolute;
	width: 100%;
	bottom: 0rpx;
	padding: 0px 20rpx;
	button {
		color: #262626;
		background-color: #ffffff;
		margin: 5rpx;
	}
	.primary-button {
		color: #ffffff;
		background-color: #4088fe;
	}
}

.confirm-content{
    display: flex;
    align-items: center;
    .confirm-content-icon{
        margin-right: 20rpx;
    }
    .confirm-content-text{
        font-size: 32rpx;
    }
}
</style>
